import React from 'react';
import { Row, Col, Form, Input, Button } from 'antd';
const FormItem = Form.Item;

export default class RegisterForm extends React.Component {
  static propTypes = {
    handleSubmit: React.PropTypes.func.isRequired
  }

  render() {
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: { span: 4 },
      wrapperCol: { span: 20 },
    }
    return (
      <Form horizontal onSubmit={
          (e) => {
            e.preventDefault();
            this.props.handleSubmit(this.props.form.getFieldsValue());
          }
        }>
        <FormItem label="用户名" {...formItemLayout}>
          {getFieldDecorator('name')(
            <Input type="text"/>
          )}
        </FormItem>
        <FormItem label="密码" {...formItemLayout}>
          {getFieldDecorator('password')(
            <Input type="password" />
          )}
        </FormItem>
        <FormItem label="Email" {...formItemLayout}>
          {getFieldDecorator('email')(
            <Input type="email" />
          )}
        </FormItem>
        <Row type="flex" justify="end">
            <Button style={{backgroundColor: '#ff6c00', color: 'white', borderColor: '#ff6c00'}}
            size="large" type="primary" htmlType="submit">注册</Button>
        </Row>
      </Form>
    );
  }
}
